<template>
  <div class="home">
  <h1>小黑子记事本</h1>
  <el-input v-model="input" placeholder="添加事件" @keyup.enter="addTodos"/>
  <el-alert title="输入不能为空" type="error" v-show="Ivisable" show-icon/>
  <hr/>
  <el-table :data="data.tableData" style="width: 80%;margin: 10px auto;">
  <el-table-column label="编号" width="180" >
    <template #default="scope">
      <div style="display: flex; align-items: center">
        <el-icon><timer /></el-icon>
        <!--使用$index获取数组数据对应下标-->
        <span style="margin-left: 10px">{{ scope.$index }}</span>
      </div>
    </template>
  </el-table-column>
  <el-table-column label="事件名" width="380">
    <template #default="scope">
      <el-popover effect="light" trigger="hover" placement="top" width="auto">
        <template #default>
          <div>名称： {{ scope.row.name }}</div>
        </template>
        <template #reference>
          <el-tag>{{ scope.row.name }}</el-tag>
        </template>
      </el-popover>
    </template>
  </el-table-column>
  <el-table-column label="操作">
    <template #default="scope">
      <el-button
        size="small"
        type="danger"
        @click="handleDelete(scope.$index)"
        >删除</el-button
      >
    </template>
  </el-table-column>
</el-table>
</div>
</template>

<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity";
// import { isVisible } from "element-plus/es/utils";
let input = ref('');
let tindex = 0
const data = reactive({
  tableData:[
      {name:'吃饭'},
      {name:'睡觉'},
      {name:'打豆豆'},
      {name:'敲代码'}
  ]
});
let Ivisable = ref(false)
//删除对应事件
const handleDelete = (index:number)=>{
  console.log(index);
  data.tableData.splice(index,1)
}
//添加事件
function addTodos(){
  if(input.value===""){
      Ivisable.value = true;
      return
  }
  data.tableData.push({name:input.value})
  Ivisable.value=false;
  input.value=''
}

</script>

<style lang="scss" scoped>
.home {
  margin: 50px auto;
  width: 1000px;
  height: 600px;
  background-color: aliceblue;
  overflow: auto;
}
.el-input {
  margin: 10px auto;
  width: 50%;
  height: 40px;
}
</style>
